<template>
 <h1>个人中心页</h1>
  <div v-for="(weibo,i) in arr" style="width:500px;height: 40px;margin:0 auto;">
    <!-- 因为都是自己发的,所以不用体现作者的昵称 -->
    <h3 style="float: left;margin:0;line-height:32px;">{{weibo.content}}</h3>
    <el-button type="danger" style="float:right;" @click="del(weibo.id,i)">删除</el-button>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
//准备数组存放请求回来的微博列表数据
const arr = ref([]);
//页面加载完毕立即执行
onMounted(()=>{
  //先获取当前登录的用户id
  let user = localStorage.user?JSON.parse(localStorage.user):null;
  axios.get('http://localhost:8080/v1/weibos?userId='+user.id).then((response)=>{
      if (response.data.code==2002){
        arr.value = response.data.data;
        //如果数组的长度为0(成功请求但用户自己的微博数为0)
        if (arr.value.length == 0){
          ElMessage.warning('快来发布你的第一条内容吧!');
          router.push('/post');
        }
      }
  })
})

//添加删除微博的方法
const del = (id,i)=>{
  if (confirm('您是否要删除此条微博?')){
    axios.post('http://localhost:8080/v1/weibos/'+id+'/delete').then((response)=>{
      if (response.data.code==2002){
        ElMessage.success('删除成功!');
        arr.value.splice(i, 1);
        //如果没有微博了
        if (arr.value.length==0){
          ElMessage.warning('快来发布微博吧!');
          //跳转至发布页
          router.push('/post')
        }
      }
    })
  }
}

</script>

<style scoped>

</style>